import React from "react"
import { Row, Col, Menu } from 'antd'
import Link from 'next/link'

export default function Header() {
    return (
        <div className="header">
            <Row type="flex" justify="center">
                <Col xs={24} sm={24} md={18} >
                    <span className="header-logo">
                        <Link href={{ pathname: '/' }}>
                        <a>Liao</a>
                        </Link>
                    </span>
                    <span className="header-txt">前端菜鸡</span>
                </Col>
                <Col className="memu-div" xs={0} sm={0} md={6} >
                    <Row type='flex'>
                        <Col xs={0} sm={0} md={6}  >
                            <Link href={{ pathname: '/' }}>
                                <a>首页</a>
                            </Link>
                        </Col>
                        <Col xs={0} sm={0} md={6}  >
                            <Link href={{ pathname: '/list', query: { id: 1 } }}>
                                <a>技术</a>
                            </Link>
                        </Col>
                        <Col xs={0} sm={0} md={6}  >
                            <Link href={{ pathname: '/life' }}>
                                <a>大学</a>
                            </Link>
                        </Col>
                        <Col xs={0} sm={0} md={6}  >
                            <Link href={{ pathname: '/about' }}>
                                <a>关于</a>
                            </Link>
                        </Col>
                    </Row>
                </Col>
            </Row>
            <style jsx>
                {`
                .header{
                    background-color: #fff;
                    padding: .4rem;
                    overflow: hidden;
                    height: 2.7rem;
                    border-bottom:1px solid #eee;
                }
                .header-logo{
                    color:#1e90ff;
                    font-size: 1.4rem;
                    text-align: left;
                }
                .header-txt{
                    font-size: 0.6rem;
                    color: #999;
                    display: inline-block;
                    padding-left: 0.3rem;
                }
                .ant-meu{
                    line-height: 2.8rem;
                }
                .ant-menu-item{
                    font-size:1rem !important;
                    padding-left:1rem;
                    padding-right:1rem;
                }
                a{
                    font-size: 1rem;
                }
            `}
            </style>
        </div>
    )
}